<template>
  <div>
    <a-card :bordered="false" style="margin-bottom: 10px;">
      <!-- 条件搜索 -->
      <div class="table-page-search-wrapper">
        <a-form :labelCol="labelCol" :wrapperCol="wrapperCol" ref="queryForm">
          <a-row :gutter="32">
            <a-col :span="6">
              <a-form-item label="仓库">
                <a-select placeholder="请选择仓库"  v-model="queryParam.warehouseId" style="width: 100%" allow-clear   show-search optionFilterProp="children">
                  <a-select-option v-for="(d, index) in warehouseIdOptions" :key="index" :value="d.id">{{ d.warehouseName
                  }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <!-- <a-col :span="6">
              <a-form-item label="产品编号">
                <a-input v-model="queryParam.productCode" placeholder="请输入产品编号"/>
              </a-form-item>
            </a-col> -->
            <a-col :span="6">
              <a-form-item label="产品规格">
                <a-input v-model="queryParam.spec" placeholder="请输入产品规格"/>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="产品型号">
                <a-input v-model="queryParam.productModel" placeholder="请输入产品型号"/>
              </a-form-item>
            </a-col>
            
            <a-col :span="6">
              <a-form-item label="产品颜色">
                <a-input v-model="queryParam.productColor" placeholder="请输入产品颜色"/>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="品牌">
                <a-input v-model="queryParam.brand" placeholder="请输入品牌"/>
              </a-form-item>
            </a-col>
            <a-col>
              <span class="table-page-search-submitButtons" style="float: right;">
                <a-button type="primary" @click="handleQuery"><a-icon type="search" />查询</a-button>
                <a-button style="margin-left: 8px" @click="resetQuery"><a-icon type="redo" />重置</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </a-card>
    <a-modal :visible="open"
        :title="'库存台账'"
        :width="1000"
        modalHeight="600"
        @cancel="cancel">
        <a-card :bordered="false">
          <advance-table 
          :components="drag(columns2,'stockRecord')"
          columnsTitle="stockRecord"
          :pagination="{
            current: queryParam2.pageNum,
            pageSize: queryParam2.pageSize,
            total: total2,
            showSizeChanger: true,
            showLessItems: true,
            showQuickJumper: true,
            showTotal: (total, range) => `第 ${range[0]}-${range[1]} 条，总计 ${total} 条`,
            onChange: inventoryChangeSize,
            onShowSizeChange: onShowSizeChange
          }" tableKey="base-bizOrder-index-table"  rowKey="id"
            :columns="columns2" :data-source="dataList2" :loading="loading2" :format-conditions="true"
          >
            <span slot="orderTypeRender" slot-scope="{record}">
          {{ orderTypeFormat(record) }}
           </span>
          </advance-table>
        </a-card>
        <template slot="footer">
          <a-button @click="cancel">
            取消
          </a-button>
        </template>
    </a-modal>

    <a-modal :visible="open2"
             :title="'修改库存'"
             :width="500"
             modalHeight="400"
             @cancel="cancel2">
      <a-card :bordered="false">
        <a-form :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-row :gutter="32">
            <a-col :span="12">
              <a-form-item label="库存数">
                <a-input type='number' v-model="number" placeholder="请输入库存数量"/>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </a-card>
      <template slot="footer">
        <a-button @click="cancel2">
          取消
        </a-button>
        <a-button @click="save">
          保存
        </a-button>
      </template>
    </a-modal>
    <a-modal :visible="open3"
             :title="'库存明细'"
             :width="1000"
             modalHeight="600"
             @cancel="cancel3">
      <a-card :bordered="false">
        <advance-table
          :components="drag(columns3,'stockDetail')"
          columnsTitle="stockDetail"
          :pagination="{
            current: queryParam3.pageNum,
            pageSize: queryParam3.pageSize,
            total: total3,
            showSizeChanger: true,
            showLessItems: true,
            showQuickJumper: true,
            showTotal: (total, range) => `第 ${range[0]}-${range[1]} 条，总计 ${total} 条`,
            onChange: changeSize,
            onShowSizeChange: onShowSizeChange
          }" tableKey="base-bizOrder-index-table"  rowKey="id"
          :columns="columns3" :data-source="dataList3" :loading="loading3" :format-conditions="true"
        >
        </advance-table>
      </a-card>
      <template slot="footer">
        <a-button @click="cancel3">
          取消
        </a-button>
      </template>
    </a-modal>
    <a-card :bordered="false" class="table-card">
      <!-- 台账 -->
    <!-- <ledger v-if="showModal" ref="ledger" @ok="getList" @close="showModal = false" /> -->
      <advance-table title="库存列表" :pagination="{
        current: queryParam.pageNum,
        pageSize: queryParam.pageSize,
        total: total,
        showSizeChanger: true,
        showLessItems: true,
        pageSizeOptions:pageSizeOptions,
        showQuickJumper: true,
        showTotal: (total, range) => `第 ${range[0]}-${range[1]} 条，总计 ${total} 条`,
        onChange: changeSize,
        onShowSizeChange: onShowSizeChange,

      }" tableKey="base-bizOrder-index-table" @change="handleTableChange" rowKey="id" @refresh="getList"
        :columns="columns" :data-source="dataList" :loading="loading" :format-conditions="true"
        :rowClassName='rowClassName'
         :customRow="rowdbClick"
         :components="drag(columns)"
      >
        <div class="table-operations" slot="button">
          <a-button type="primary" v-hasPermi="['biz:bizInventory:export']" :loading="downLoading"  @click='exportExcel'>
            <a-icon />导出
          </a-button>
        </div>
        <span  slot="operation" slot-scope="{record}">
          <!-- <a @click="handleUpdate(record)">
            修改
          </a> -->
          <a @click="handleLedger(record)" v-if="record.id">
            台账
          </a>
          <span v-else>-</span>
        </span>
      </advance-table>
      
    </a-card>
  </div>
</template>
<script>
import { listBizProductInventory,updateBizProductInventory,listBizProductInventoryDetail } from '@/api/biz/bizProductInventory'
import {listBizProductInventoryBook,getInitData} from '@/api/biz/bizProductInventoryBook'
import AdvanceTable from '@/components/pt/table/AdvanceTable'
import { delBizPayable } from '@/api/biz/bizPayable'
import tableDragResizeMixin from '@/mixins/tableDragResizeMixin'
import { allListBizWarehouse } from '@/api/biz/bizWarehouse'
import listMixin from '@/mixins/listMixin';
import { hasPermi } from '@/utils/util';
export default {
  name: 'BizInventory',
  components: {
    AdvanceTable,
    // ledger
  },
  mixins:[tableDragResizeMixin,listMixin],
  data() {
    return {
      showModal: false,
      disabledCreated:true,
      title:'库存列表',
      listFunc:(param)=>listBizProductInventory(param),
      // 遮罩层
      loading: true,
      loading2: true,
      loading3: true,
      open: false,
      open2: false,
      open3:false,
      number:0,
      inventoryId:undefined,
      // 选中数组
      ids: [],
      // 选中的主键集合
      selectedRowKeys: [],
      // 选中的数据集合
      selectedRows: [],
      // 高级搜索 展开/关闭
      advanced: false,
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 总条数
      total: 0,
      total2: 0,
      total3: 0,
      // label的百分比
      labelCol: { span: 6 },
      // 内容区域的百分比
      wrapperCol: { span: 18 },
      // 仓库
      warehouseIdOptions:[],
      pageSizeOptions: ['11', '21', '31', '101', '201'],
      // 表格数据
      dataList: [],
      dataList2:[],
      dataList3:[],
      documentType:[],
      // 查询参数
      queryParam: {
        pageNum: 1,
        pageSize: 11,
        customerName: undefined
      },
      queryParam2: {
        pageNum: 1,
        pageSize: 10,
        customerName: undefined
      },
      queryParam3: {
        pageNum: 1,
        pageSize: 10,
        customerName: undefined
      },
      columns: [
        {
          title: '仓库',
          align: 'center',
          dataIndex: 'warehouseName'
        },
        {
          title: '产品规格',
          align: 'center',
          dataIndex: 'spec'
        },
        {
          title: '产品型号',
          align: 'center',
          dataIndex: 'productModel'
        },
        {
          title: '产品品牌',
          align: 'center',
          dataIndex: 'brand'
        },
        {
          title: '产品颜色',
          align: 'center',
          dataIndex: 'productColor'
        },
        {
          title: '辅助数量1',
          align: 'center',
          dataIndex: 'number'
        },
        {
          title: '辅助单位1',
          align: 'center',
          dataIndex: 'unitA'
        },
        {
          title: '辅助数量2',
          align: 'center',
          dataIndex: 'assistNumberA'
        },
        {
          title: '辅助单位2',
          align: 'center',
          dataIndex: 'unitB'
        },
        {
          title: '辅助数量3',
          align: 'center',
          dataIndex: 'assistNumberB'
        },
        {
          title: '辅助单位3',
          align: 'center',
          dataIndex: 'unitC'
        },
        {
          title: '预警值',
          align: 'center',
          dataIndex: 'warnStock'

        },
        {
          title: '库存期初',
          align: 'center',
          dataIndex: 'openingNumber'
        },
        {
          title: '库存单价',
          align: 'center',
          dataIndex: 'price'
        },
        {
          title: '库存金额',
          dataIndex: 'amount',
          align: 'center',
        },
        {
          title: '操作',
          align: 'center',
          width: '10%',
          scopedSlots: { customRender: 'operation' }
        }
      ],
      columns2: [
        {
          title: '日期',
          align: 'center',
          dataIndex:'bizDate'
        },
        {
          title: '单据编号',
          align: 'center',
          dataIndex:'orderNumber'
        },
        {
          title: '往来单位',
          align: 'center',
          dataIndex:'supplierName'
        },
        {
          title: '产品型号',
          align: 'center',
          dataIndex:'productModel'
        },
        {
          title: '产品颜色',
          align: 'center',
          dataIndex:'color'
        },
        {
          title: '产品品牌',
          align: 'center',
          dataIndex:'brand'
        },
        {
          title: '产品规格',
          align: 'center',
          dataIndex:'spec'
        },
        {
          title: '辅助数量1',
          align: 'center',
          dataIndex: 'number'
        },
        {
          title: '辅助单位1',
          align: 'center',
          dataIndex: 'unit'
        },
        {
          title: '辅助数量2',
          align: 'center',
          dataIndex: 'assistNumberA'
        },
        {
          title: '辅助单位2',
          align: 'center',
          dataIndex: 'assistUnitA'
        },
        {
          title: '辅助数量3',
          align: 'center',
          dataIndex: 'assistNumberB'
        },
        {
          title: '辅助单位3',
          align: 'center',
          dataIndex: 'assistUnitB'
        },
        {
          title: '单价',
          align: 'center',
          dataIndex:'price'
        },
        {
          title: '金额',
          align: 'center',
          dataIndex:'amount'
        },
        {
          title: '备注',
          align: 'center',
          dataIndex:'remark'
        },
        {
          title: '单据类型',
          dataIndex: 'orderType',
          align: 'center',
          scopedSlots: { customRender: 'orderTypeRender' },
        }
      ],
      columns3: [
        {
          title: '仓库',
          align: 'center',
          dataIndex: 'warehouseName'
        },
        {
          title: '仓位',
          align: 'center',
          dataIndex: 'spaceName'
        },
        {
          title: '产品规格',
          align: 'center',
          dataIndex: 'productModel'
        },
        {
          title: '产品型号',
          align: 'center',
          dataIndex: 'spec'
        },
        {
          title: '产品品牌',
          align: 'center',
          dataIndex: 'brand'
        },
        {
          title: '产品颜色',
          align: 'center',
          dataIndex: 'productColor'
        },
        {
          title: '辅助数量1',
          align: 'center',
          dataIndex: 'number'
        },
        {
          title: '辅助单位1',
          align: 'center',
          dataIndex: 'unitA'
        },
        {
          title: '辅助数量2',
          align: 'center',
          dataIndex: 'assistNumberA'
        },
        {
          title: '辅助单位2',
          align: 'center',
          dataIndex: 'unitB'
        },
        {
          title: '辅助数量3',
          align: 'center',
          dataIndex: 'assistNumberB'
        },
        {
          title: '辅助单位3',
          align: 'center',
          dataIndex: 'unitC'
        },
        {
          title: '预警值',
          align: 'center',
          dataIndex: 'warnStock'

        },
        {
          title: '理论成本',
          align: 'center',
          dataIndex: 'price'
        },
        {
          title: '理论金额',
          dataIndex: 'amount',
          align: 'center',
        }
      ],
    }
  },
  created() {
    
    this.initColumnsSetting()
    this.getList()
    getInitData('document_type').then(response => {
      this.documentType = response.data.document_type
    })
    
    allListBizWarehouse().then(response => {
      this.warehouseIdOptions = response.data
    })
    this.initColumnsSetting('stockRecord','columns2')
    this.initColumnsSetting('stockDetail','columns3')
    // 没有权限干掉列
    if(!this.hasPermi('biz:bizInventory:show_price')){
      let hideColumns = 'price,amount'
      this.columns = this.columns.filter(v=>!hideColumns.includes(v.dataIndex))
      let hideColumns2 = 'price,amount'
      this.columns2 = this.columns2.filter(v=>!hideColumns2.includes(v.dataIndex))
      let hideColumns3 = 'price,amount'
      this.columns3 = this.columns3.filter(v=>!hideColumns3.includes(v.dataIndex))
    }
  },
  methods: {
    hasPermi,
    /** 查询销售单列表 */
    getList() {
      this.loading = true
      let param = this.getQueryParam()
      listBizProductInventory(param).then(response => {
        this.dataList = response.data.list
        this.total = response.data.total
        this.loading = false
        this.tableAddTotalRow(this.columns,this.dataList)
      })
    },
    getQueryParam(){
      return Object.assign({},this.queryParam,{pageSize:this.queryParam.pageSize - 1})
    },
    handleLedger(record){
      this.open = true
      this.queryParam2.productId=record.productId
      this.queryParam2.warehouseId=record.warehouseId
      listBizProductInventoryBook(this.queryParam2).then(res=>{
        this.dataList2 = res.data.list
        this.total2 = res.data.total
        this.loading2 = false
      })

    },
    handleUpdate(record){
      this.open2 = true
      this.number=record.number;
      this.inventoryId=record.id;

    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParam.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParam = {
        pageNum: 1,
        pageSize: 10,
        supplierName: undefined

      }
      this.handleQuery()
    },
    cancel() {
      this.open = false
      // this.getList()
    },
    cancel2() {
      this.open2 = false
      // this.getList()
    },
    cancel3() {
      this.open3 = false
      // this.getList()
    },
    /** 翻页操作 */
    onShowSizeChange(current, pageSize) {
      this.queryParam.pageSize = pageSize
      this.getList()
    },
    /** 翻页操作 */
    onSizeChange(current, size) {
      this.queryParam.pageNum = 1
      this.queryParam.pageSize = size
      this.getList()
    },
    /** 翻页操作 */
    changeSize(current, pageSize) {
      this.queryParam.pageNum = current
      this.queryParam.pageSize = pageSize
      this.getList()
    },
    /** 翻页操作 */
    inventoryChangeSize(current, pageSize) {
      this.queryParam2.pageNum = current
      this.queryParam2.pageSize = pageSize
      this.listBizProductInventoryBook({productId:this.queryParam2.productId})
    },
    
    /** 翻页操作 */
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
      this.ids = this.selectedRows.map(item => item.id)
      this.single = selectedRowKeys.length !== 1
      this.multiple = !selectedRowKeys.length
    },
    handleTableChange(pagination, filters, sorter) {
      if (sorter.field !== undefined && sorter.field !== null && sorter.field !== '') {
        this.queryParam.orderByColumn = 'a.' + sorter.field
        this.queryParam.isAsc = sorter.order
      }
      this.getList()
    },
    rowClassName(record,index) {
      if(record.number<=record.warnStock) {
        return 'warn'
      }
    },
    orderTypeFormat (row) {
      return this.selectDictLabel(this.documentType, row.orderType)
    },
    save(row) {
      var that = this
      this.$confirm({
        title: '确认修改库存数?',
        onOk() {
          return updateBizProductInventory({id:that.inventoryId,number:that.number})
            .then(() => {
              that.$message.success(
                '修改成功',
                3
              )
              that.open2=false;
              that.getList();
            })
        },
        onCancel() { }
      })
    },
    rowdbClick(row) {
      let that = this;
      return {
        on: {
          dblclick: (event) => {
            if(!row.id) return;
            that.open3=true;
            this.loading3 = true

            listBizProductInventoryDetail({...this.queryParam3,productId:row.productId,warehouseId:row.warehouseId}).then(response => {
              this.dataList3 = response.data.list
              this.total3 = response.data.total
              this.loading3 = false
            })
          }
        }
      }
    }
  }
}
</script>